<template>
	<div>
		<div>
			<Form  inline>
				<FormItem>
					<Input type="text" v-model="params.title" placeholder="请输入资讯标题">
					<Icon type="ios-cube-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>

				<FormItem>
					<Select v-model="params.relationTableId" style="width: 180px;" prefix="ios-list-box-outline" placeholder="请输入资讯分类">
						<Option :value="item.id" v-for="(item,index) in searchCategoryList" :key="index">{{item.name}}</Option>
					</Select>
				</FormItem>
				<FormItem>
					<Button type="primary" icon="ios-search-outline" style="margin-right: 10px;" @click="search">查询</Button>
					<Button type="primary" icon="md-add" @click="add">
						新增
					</Button>
				</FormItem>
			</Form>
		</div>

		<Table border :columns="columns" :data="data"></Table>
	    <div style="margin: 10px;overflow: hidden">
	        <div style="float: right;">
	            <Page :total="total" :current="params.current"   @on-change="changePage" ></Page>
	        </div>
	    </div>
		<Modal v-model="model" :title="modalType+'新闻资讯'" :mask-closable="false" :footer-hide="true" width='40%'>
			<Form :model="formItem" :label-width="100" ref="formValidate" :rules="ruleValidate">
				<FormItem label="资讯标题(中)" prop="title">
					<Input v-model="formItem.title" placeholder="请输入资讯标题"></Input>
				</FormItem>
				<FormItem label="资讯标题(英)" prop="title">
					<Input v-model="formItem.engTitle" placeholder="请输入资讯标题"></Input>
				</FormItem>
				<FormItem label="资讯标题(日)" prop="title">
					<Input v-model="formItem.jpnTitle" placeholder="请输入资讯标题"></Input>
				</FormItem>				
				<Row>
					<Col span="12">
					<FormItem label="资讯分类" prop="relationTableId">
						<Select v-model="formItem.relationTableId" prefix="ios-list-box-outline" placeholder="请输入资讯分类">
							<Option :value="item.id" v-for="(item,index) in categoryList" :key="index">{{item.name}}</Option>
						</Select>
					</FormItem>
					</Col>

					<Col span="12">
					<FormItem label="资讯排序">
						<Input v-model="formItem.showOrder" placeholder="请输入资讯排序"></Input>
					</FormItem>
					</Col>
				</Row>

				<FormItem label="资讯描述(中)" prop="describeInfo">
					<Input v-model="formItem.describeInfo" placeholder="请输入资讯描述"></Input>
				</FormItem>
				<FormItem label="资讯描述(英)" prop="engDescribe">
					<Input v-model="formItem.engDescribe" placeholder="请输入资讯描述"></Input>
				</FormItem>
				<FormItem label="资讯描述(日)" prop="jpnDescribe">
					<Input v-model="formItem.jpnDescribe" placeholder="请输入资讯描述"></Input>
				</FormItem>				
				

				<FormItem label="资讯封面">
					<Upload :action="$baseUrl+'uploadFile/upload/file'" name="file" :show-upload-list="false" :format="['jpg','png']" :max-size="10*1024" :on-success="handleSuccess" :on-format-error="formatError" :on-exceeded-size="exceededSize">
						<Button icon="ios-cloud-upload-outline">上传封面</Button>
					</Upload>
				</FormItem>

				<FormItem label="" v-show="imgList.length>0">
					<div class="img-item" v-for="(item,index) in imgList" :key="index">
						<div class="wrap-head">
							<img :src="item.fileUrl" alt="" />
						</div>
						<div class="wrap-foot" @click="delImg(index)">
							<Icon type="ios-trash-outline" size="20" />
						</div>
					</div>
				</FormItem>

				<FormItem label="资讯详情">
					<editor ref="editor"></editor>
				</FormItem>

				<FormItem>
					<Button type="primary" @click="submit">确认</Button>
					<Button style="margin-left: 8px" @click="cancel">取消</Button>
				</FormItem>
			</Form>
		</Modal>
		<Modal v-model="removeModal" width="360">
			<p slot="header" style="color:#f60;text-align:center">
				<Icon type="ios-information-circle"></Icon>
				<span>删除警告?</span>
			</p>
			<div style="text-align:center">
				<p>请确认是否删除这条记录</p>
			</div>
			<div slot="footer">
				<Button type="error" size="large" long @click="delOk">删除</Button>
			</div>
		</Modal>		
	</div>

</template>
<script>
	import rowImages from '@/components/image/row-images.vue'
	import Editor from '../components/editor.vue'
	export default {
		components: {
			rowImages,
			Editor
		},
		data() {
			return {
				removeModal:false,
				currentId: '',
				modalType: null,
				imgList: [],
				searchCategoryList: [],
				categoryList:null,
				params:{
					current:1,
					relationTableId:0,
					size:10,
					title:'',
					categoryId:1
				},
				total:0,
				formItem: {
					title: '',
					engTitle:'',
					jpnTitle:'',					
					describeInfo: '',
					engDescribe:'',
					jpnDescribe:'',
					showOrder: '',
					relationTableId: ''
				},
				ruleValidate: {
					title: [{
						required: true,
						message: '资讯标题不能为空',
						trigger: 'blur'
					}],
					engTitle: [{
						required: true,
						message: '资讯标题不能为空',
						trigger: 'blur'
					}],
					jpnTitle: [{
						required: true,
						message: '资讯标题不能为空',
						trigger: 'blur'
					}],	
					describeInfo: [{
						required: true,
						message: '资讯描述不能为空',
						trigger: 'blur'
					}],
					engDescribe: [{
						required: true,
						message: '资讯描述不能为空',
						trigger: 'blur'
					}],
					jpnDescribe: [{
						required: true,
						message: '资讯描述不能为空',
						trigger: 'blur'
					}],					
					relationTableId: [{
						required: true,
						message: '资讯分类不能为空',
						trigger: 'change'
					}]
				},
				model: false,
				columns: [
				
					{
						title: '资讯标题',
						key: 'title',
						align: 'center'
					},
					{
						title: '资讯描述',
						key: 'describeInfo',
						align: 'center',
					},
					{
						title: '资讯分类',
						key: 'name',
						align: 'center',
					},					
				    {
						title: '资讯封面',
						searchItemAble: false,
						minWidth: 100,
						align: 'center',
						render: (h, params) => {
							if(params.row.uploadFile.fileUrl) {
								var images = new Array()
								images[0] = {
									'thumb': params.row.uploadFile.fileUrl,
									'image': params.row.uploadFile.fileUrl
								}
								return h(rowImages, {
									props: {
										images: images,
										dwidth: 180,
										dheight: 100
									}
								})
							} else {
								return h('div', '暂无图片');
							}
						}
					},
					{
						title: '排序',
						key: 'showOrder'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.edit(params.row)
										}
									}
								}, '编辑'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
                                           this.remove(params.row)
										}
									}
								}, '下线')
							]);
						}
					}
				],
				data: []
			}
		},
		methods: {
			// 下架接口
			delOk() {
				let params={
					ids:this.currentId
				}
				this.$Axios.Post(this.$baseUrl+'relationFile/remove',params).then(res => {
					this.removeModal = false
					this.afterRequest(res)
				})
			},	
			remove(row) {
				this.removeModal = true
				this.currentId = row.id
			},			
			// 图片上传成功后执行
			handleSuccess(response, file, fileList) {
				this.imgList = []
				this.imgList.push(response)
			},
			// 文件格式错误
			formatError() {
				this.$Notice.error({
					title: '文件格式只支持jpg,png',
					desc: false
				});
			},
			// 文件大小超出
			exceededSize() {
				this.$Notice.error({
					title: '文件大小超出10M',
					desc: false
				});
			},
            changePage (res) {
            	this.params.current=res
                this.onLoad()
            },
			resetForm() {
				this.formItem = {
					title: '',
					engTitle:'',
					jpnTitle:'',					
					describeInfo: '',
					engDescribe:'',
					jpnDescribe:'',
					showOrder: '',
					relationTableId: ''
				}
				this.imgList = []
				this.$refs['editor'].setHtml('')
			},
			add() {
				this.model = true
				this.modalType = '新增'
				this.resetForm()
			},
			edit(row){
				this.currentId=row.id
				this.modalType = '编辑'
				this.model = true							
				this.formItem = {
					title: row.title,
					engTitle:row.engTitle,
					jpnTitle:row.jpnTitle,
					describeInfo: row.describeInfo,
					engDescribe: row.engDescribe,
					jpnDescribe: row.jpnDescribe,
					showOrder: row.showOrder,
					relationTableId: row.relationTableId
				}	
				this.imgList=[]
				this.imgList.push(row.uploadFile)
				this.$refs['editor'].setHtml(row.richText)
			},
			cancel() {
				this.$refs['formValidate'].resetFields();
				this.model = false
			},
			afterRequest(B) {
				if(B) {
					this.$Notice.success({
						title: '操作成功',
						desc: false
					});
					this.model = false
					this.onLoad()
				} else {
					this.$Notice.error({
						title: '操作失败',
						desc: false
					});
				}
			},
			submit() {
				this.$refs['formValidate'].validate((valid) => {
					if(valid) {
						if(this.imgList.length > 0) {
							this.formItem.fileId = this.imgList[0].id
						} else {
							this.formItem.fileId = ''
						}
						this.formItem.richText = this.$refs['editor'].getHtml()
						let url;
						if(this.modalType == '新增') {
							url = this.$baseUrl+'relationFile/save'
						} else {
							this.formItem.id=this.currentId
							url = this.$baseUrl+'relationFile/update'
						}
						this.$Axios.Post(url, this.formItem).then(res => {
							this.afterRequest(res)
						})
					}
				})
			},
			delImg(index) {
				this.imgList.splice(index, 1);
			},
			search(){
				this.params.current=1
				this.onLoad()
			},
			onLoad() {		
				this.$Axios.Post(this.$baseUrl+'relationFile/page',this.params).then(res => {
					this.data = res.records
					this.total=res.total
				})
			},
			getCategory() {
				this.$Axios.Get(this.$baseUrl+'categorySub/list?categoryId=1').then(res => {
					let obj={
						id:0,
						name:'全部资讯'
					}
					this.categoryList=res					
					this.searchCategoryList.push(obj)
					this.searchCategoryList=this.searchCategoryList.concat(res)
				})
			}
		},
		mounted() {
			this.getCategory()
			this.onLoad()
		}
	}
</script>
<style scoped="">
	.fuzhu {
		margin-left: 10px;
		color: #BCBCBC;
	}

	
	.img-item {
		width: 100px;
		border: 1px solid #BCBCBC;
		float: left;
		margin-right: 4px;
	}
	
	.wrap-head {
		width: 100%;
		height: 100px;
	}
	
	.img-item img {
		width: 100%;
		height: 100%;
	}
	
	.wrap-foot {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 4px 0;
		cursor: pointer;
	}
</style>